<script setup>
import { onMounted } from 'vue'

/*
  vue2:
    创建期
        创建前：beforeCreate
        创建后: created
    渲染期
        渲染前：beforeMount
        渲染后:mounted
    更新期:vue页面上使用的相关数据有修改
        更新前：beforeUpdate
        更新后:updated
    销毁期
        销毁前：beforeDestroy 做一些清理工作
        销毁后：destroyed
    缓存期(keep-alive)
       激活时：activated
       隐藏时:deactivated
vue3组合api下不一样了
     setup替换了以前的beforeCreate与created 
     销毁期:更名了（销毁前：onBeforeUnmount  销毁后:onUnmounted）
     所有的除setup外生命周期前面都加了on
     用法：
       1：导入 
          import {onMounted} from 'vue'
       2:使用
         onMounted(()=>{
           ...
         })
       注意点：可以用多次了
*/

onMounted(() => {
  console.log('渲染后onMounted a')
})

onMounted(() => {
  console.log('渲染后onMounted b')
})

onMounted(() => {
  console.log('渲染后onMounted c')
})

onMounted(() => {
  console.log('渲染后onMounted d')
})
</script>

<template>
  <div class="app-page">app</div>
</template>

<style scoped></style>
